<template>
	<view class="page">
		<view class="contetn">
			<HeaderTop class="header">
			</HeaderTop>
			<image class="title" src="../../static/SendCode/icon6.png" mode=""></image>
			<view class="deadline">
				<view class="item" v-for="item in deadline.split('')">
					{{item}}
				</view>
			</view>
			<view class="reward">
				<view class="reward-inner">
					<view class="title">
						<view>活动奖励</view>
						<image src="/static/SendCode/icon1.png" mode=""></image>
					</view>
					<view class="goods-list">
						<view class="goods-item" v-for="(item,index) in rewardsMaps">
							<image :src="`https://images.linglinggong.net/${item.img}`" mode=""></image>
							<view class="goods-name">
								{{index==0?'一等奖':index==1?'二等奖':index==2?'三等奖':index==3?'四等奖':index==4?'五等奖':''}}{{item.rewards}}
							</view>
							<view class="goods-condition">
								{{item.numMax}}单{{item.orderTimeMax}}小时
							</view>
						</view>
					</view>
					<view class="title">
						<view>达成进度</view>
						<image src="/static/SendCode/icon1.png" mode=""></image>
					</view>
					<view class="process">
						<view class="">
							<Pro :obj='list[0]'>{{list[0].title}} </Pro>
							<Pro :obj='list[1]'>{{list[1].title}} </Pro>
						</view>
						<view class="complete">
							<image v-if="reachReward" :src="`https://images.linglinggong.net/${reachReward.img}`"
								mode=""></image>
							<image v-else src="/static/SendCode/icon2.png" mode=""></image>
							<view>{{reachReward?'已达成':'未达成'}}</view>
						</view>
					</view>
					<image class="btn" @click="goList()" src="/static/SendCode/icon5.png" mode=""></image>
				</view>
			</view>
			<view class="roul">
				<image src="/static/SendCode/icon4.png" mode=""></image>
				<view class="text">
					<view v-for="item in rewardsMaps.slice(0,1)">
						1、活动时间{{item.startTime.split('-').join('.')}}-{{item.endTime.split('-').join('.')}}
					</view>
					<view>2、奖励获得条件：<text v-for="(item,index) in rewardsMaps">
							{{index==0?'一':index==1?'二':index==2?'三':index==3?'四':index==4?'五':''}}等奖：活动期间达成{{item.numMax}}个无差评订单，且累计工时达到{{item.orderTimeMax}}小时</text>
					</view>
					<view>3、活动结束后，经过平台核实无误，将会7天内完成奖励发放，请耐心等待，如遇特殊情况请联系平台客服</view>
				</view>
			</view>
			<view class="text-bottom"> 活动最终解释权归平台所有 </view>
		</view>
		<!-- 工装奖励  -->
		<Mosk @onClose='onClose' v-if="isShow" :id='detail.rewardActivitiesParticipantsId' :specsFlag="specsFlag">
		</Mosk>
	</view>
</template>
<script>
	import Mosk from './com/mosk.vue'
	import Pro from './com/pro.vue'
	export default ({
		components: {
			Mosk,
			Pro
		},
		data() {
			return {
				list: [{
					title: '订单(无差评)',
					need: 0,
					now: 0
				}, {
					title: '工时',
					need: 0,
					now: 0
				}],
				isShow: false,
				detail: {},
				deadline: '',
				rewardsMaps: [],
				reachReward: {},
				specsFlag: ''
			}
		},
		onShow() {
			this.getDetail()
		},
		methods: {
			goList() {
				uni.navigateTo({
					url: '/pages/sendCode/list'
				})
			},
			onClose() {
				this.isShow = false
			},
			getDetail() {
				this.$fetch(this.$api.query_tooling_rewards, {
					region: uni.getStorageSync('region1').slice(0, 6) || 330782
				}, 'POST').then(res => {
					let {
						code,
						data,
						msg
					} = res
					if (code) return uni.showToast({
						title: msg,
						icon: 'none'
					})
					this.detail = data
					this.list[0].need = data.rewardsMaps[0].numMax
					this.list[1].need = data.rewardsMaps[0].orderTimeMax
					this.list[0].now = data.num
					this.list[1].now = data.orderTime
					this.rewardsMaps = data.rewardsMaps
					this.deadline = `还剩${this.detail.day}天`
					this.specsFlag = data.specsFlag
					this.reachReward = this.rewardsMaps.find((item) => {
						return data.num >= item.numMax && data.orderTime >= item.orderTimeMax
					})
					console.log('this.reachReward', this.reachReward)
					// 发放
					if (data.distributeRewards == 1 && data.eligible == 1) {
						uni.showToast({
							title: '您的奖励正在发放中请耐心等待',
							icon: 'none',
							duration: 3000
						})
					}
					// 选尺码  符合条件未发放
					if (data.distributeRewards == 0 && data.eligible == 1) {
						this.isShow = true
					}
				})
			}
		},
	})
</script>
<style lang="scss" scoped>
	.page {
		.contetn {
			width: 100%;
			height: 2954rpx;
			color: #262626;
			overflow: hidden;
			background: url('../../static/SendCode/newBg.jpg') center center/cover no-repeat;
			position: relative;

			.header {
				position: fixed;
				top: 0;
			}

			&>.title {
				width: 100vw;
				height: 238rpx;
				margin-top: 162rpx;
			}

			&>.deadline {
				display: flex;
				justify-content: center;
				margin-top: 320rpx;

				&>.item {
					width: 72rpx;
					height: 78rpx;
					background-color: #FFFFFF;
					border-radius: 12rpx;
					color: #673102;
					font-weight: bold;
					margin: 0 10rpx;
					text-align: center;
					line-height: 78rpx;
					font-size: 40rpx;
				}
			}

			&>.reward {
				width: 694rpx;
				height: 1000rpx;
				margin: 40rpx auto;
				background-color: rgba(255, 255, 255, 0.50);
				border-radius: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&>.reward-inner {
					width: 666rpx;
					height: 976rpx;
					background-color: #FFF3EC;
					border-radius: 30rpx;
					padding: 20rpx;
					box-sizing: border-box;

					&>.title {
						width: 149rpx;
						height: 36rpx;
						position: relative;
						margin-top: 60rpx;

						&>image {
							width: 100%;
							height: 100%;
						}

						&>view {
							position: absolute;
							top: -26rpx;
							left: 6rpx;
							z-index: 1;
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					&>.goods-list {
						display: flex;
						margin: 54rpx 0 20rpx 0;
						overflow: scroll;

						&>.goods-item {
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-left: 24rpx;

							&>image {
								width: 192rpx;
								height: 192rpx;
								margin-bottom: 18rpx;
							}

							&>.goods-name {
								font-weight: bold;
								margin-bottom: 18rpx;
							}

							&>.goods-condition {
								color: #737373;
								font-size: 24rpx;
							}
						}

						&>.goods-item:first-child {
							margin-left: 0;
						}
					}

					&>.process {
						margin-top: 20rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;

						&>.complete {
							width: 192rpx;
							height: 194rpx;
							background-color: #FFFFFF;
							text-align: center;
							border-radius: 10rpx;

							&>image {
								width: 162rpx;
								height: 106rpx;
								margin: 20rpx 0 6rpx 0;
							}
						}
					}

					&>.btn {
						display: block;
						width: 480rpx;
						height: 124rpx;
						margin: 40rpx auto;
					}
				}
			}

			&>.roul {
				margin-top: 128rpx;
				padding: 0 28rpx;
				color: #FFFFFF;

				&>image {
					display: block;
					width: 384rpx;
					height: 54rpx;
					margin: 0 auto;
				}

				&>.text {
					font-size: 32rpx;
					line-height: 50rpx;
					margin-top: 42rpx;

					&>view {
						&>text {
							display: block;
							text-indent: 2em;
						}
					}
				}
			}
		}
	}

	.text-bottom {
		text-align: center;
		font-size: 24rpx;
		margin-top: 90rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 40rpx;
		color: #FFFFFF;
	}
</style>